<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>vect2d 회전예제</title>
		<script src="../libs/gbox3d/core.js"></script>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			
			$(document).ready(function() {

				var vec = new gbox3d.core.Vect2d(1, 0);

				var center = new gbox3d.core.Vect2d(100, 100);

				var canvas = $('#3darea')[0];
				var ctx = canvas.getContext('2d');

				ctx.beginPath();
				//vec.rotate(center,Math.PI/4);
				ctx.moveTo(center.X, center.Y);
				vec.multiply(50);
				vec.addToThis(center);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();

				
				ctx.beginPath();
				vec.set(1, 0);
				vec.rotate(Math.PI / 4);
				vec.normalize();
				vec.multiply(50);
				vec.addToThis(center);

				ctx.moveTo(center.X, center.Y);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();
				
				
				ctx.beginPath();
				vec.set(1, 0);
				vec.rotate(Math.PI / 2);
				vec.normalize();
				vec.multiply(50);
				vec.addToThis(center);

				ctx.moveTo(center.X, center.Y);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();
				
				ctx.beginPath();
				vec.set(1, 0);
				vec.rotate(Math.PI );
				vec.normalize();
				vec.multiply(50);
				vec.addToThis(center);
				
				ctx.lineWidth = 4;
				ctx.strokeStyle = 'rgb(255,0,0)';

				ctx.moveTo(center.X, center.Y);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();
				
				//각도를 사용하기
				ctx.beginPath();
				vec.set(1, 0);
				vec.rotate(gbox3d.core.degToRad(180+45) );
				vec.normalize();
				vec.multiply(50);
				vec.addToThis(center);
				
				ctx.lineWidth = 4;
				ctx.strokeStyle = 'rgb(255,64,0)';

				ctx.moveTo(center.X, center.Y);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();
				
				////////
				ctx.beginPath();
				vec.set(1, 0);
				vec.rotate(gbox3d.core.degToRad(180+90) );
				vec.normalize();
				vec.multiply(50);
				vec.addToThis(center);
				
				ctx.lineWidth = 4;
				ctx.strokeStyle = 'rgb(255,128,0)';

				ctx.moveTo(center.X, center.Y);
				ctx.lineTo(vec.X, vec.Y);
				ctx.stroke();			
			});

		</script>
	</head>
	<body>
		<div align="center">
			<canvas id="3darea" width="640" height="480" ></canvas>
		</div>
	</body>
</html>
